<%@ page import="java.util.ArrayList" %>
<%@ page import="vo.Food" %>
<%@ page import="vo.Admin" %>
<%@ page import="vo.User" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../resources/css/jquery-ui-1.10.4.custom.min.css">
    <script src="../resources/js/jquery-1.10.2.js"></script>
    <script src="../resources/js/jquery-ui-1.10.4.custom.min.js"></script>
    <title>main</title>
    <link href="../resources/css/default.css" rel="stylesheet"/>
</head>
<body>
<%
    Object info = session.getAttribute("info");
    Admin admin = null;
    if (info instanceof Admin) {
        admin = (Admin) info;
    }
    User sysUser = null;
    if (info instanceof User) {
        sysUser = (User) info;
    }

    ArrayList<Food> foods = (ArrayList<Food>) session.getAttribute("onePageFood");
    int sumIndex = (int) session.getAttribute("sumIndex");
%>
<div id="page" class="container">
    <div id="header">
        <div id="logo">
            <img src="../userImg/pikaqiu.jpeg"/>
            <h1><%=admin!=null?admin.getId():sysUser.getName()%>
            </h1>
        </div>
        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="../one_page_food">食品管理</a></li>
                <li><a onclick="return confirm('确认退出?');" href="../exit">退出登录</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="top">
            <h2>食品信息管理</h2>
            <hr/>
            <div class="toolbar">
                <%
                    if (admin != null) {
                %>
                <button class="btn-add">添加食品</button>
                <%
                    }
                %>
                <div class="find">
                    <form action="../one_page_food" method="post">
                        <input id="find-text" type="text" name="key" placeholder="输入序号或食品名称搜索">
                        <input style="padding: 0px 12px;" class="find-btn" type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </div>
        <div class="table">
            <table id="table" width="800" frame="box" align="center">
                <tr>
                    <th height="35">序号</th>
                    <th>食品名称</th>
                    <th>食品描述</th>
                    <th>食品图片</th>
                    <th>食品类型</th>
                    <th>发售日期</th>
                    <%
                        if (admin != null) {
                    %>
                    <th>操作</th>
                    <%
                        }
                    %>
                </tr>
                <%
                    for (Food food : foods) {
                %>
                    <%
                        if (admin != null) {
                    %>
                        <tr>
                            <form method="post" action="../update_food">
                                <td height="35" style="width: 60px"><%=food.getId()%></td>
                                <td><input value="<%=food.getName()%>" name="fname" class="table-input" style="width: 120px;"></td>
                                <td><input value="<%=food.getDesc()%>" name="fdesc" class="table-input" style="width: 300px;"></td>
                                <td>
                                    <input type="file" class="file-upload" style="display: none;">
                                    <input id="fimg" value="<%=food.getImg()%>" name="fimg" class="table-input" style="width: 120px;" type="hidden">
                                    <img id="img" class="img" width="50" height="50" src="<%=food.getImg()%>" ></td>
                                <td><input value="<%=food.getType()%>" name="ftype" class="table-input" style="width: 120px;"></td>
                                <td><input value="<%=food.getDate()%>" name="fdate" type="month" class="table-input" style="width: 200px;"></td>
                                <input value="<%=food.getId()%>" name="fid" type="hidden">
                                <td style="width: 240px"><input type="submit" class="update-btn" value="修改">
                                    &nbsp;
                                    <a class="btn-delete"
                                       onclick="return confirm('确定要删除吗?');"
                                       href=<%="'../delete_food?id=" + food.getId() + "'"%>>删除</a>
                                </td>
                            </form>
                        </tr>
                    <%
                        } else {
                    %>
                        <tr>
                            <form method="post" action="../update_food">
                                <td height="35" style="width: 60px"><%=food.getId()%></td>
                                <td><input readonly value="<%=food.getName()%>" name="fname" class="table-input" style="width: 120px;"></td>
                                <td><input readonly value="<%=food.getDesc()%>" name="fdesc" class="table-input" style="width: 300px;"></td>
                                <td><img class="img" width="50" height="50" src="<%=food.getImg()%>" ></td>
                                <td><input readonly value="<%=food.getType()%>" name="ftype" class="table-input" style="width: 120px;"></td>
                                <td><input readonly value="<%=food.getDate()%>" name="fdate" type="month" class="table-input" style="width: 200px;"></td>
                            </form>
                        </tr>
                    <%
                        }
                    %>

                <%
                    }
                %>
            </table>
        </div>
        <div id="index">
            <a href="../one_page_food?index=1">首页</a>
            <%
                for (int i=1; i<=sumIndex; i++){
            %>
            <a href="../one_page_food?index=<%=i%>">第<%=i%>页</a>
            <%
                }
            %>
            <a href="../one_page_food?index=<%=sumIndex%>">尾页</a>
        </div>
    </div>
</div>

<%--添加食品信息对话框--%>
<div id="add-dialog" title="添加食品信息">
    <form id="add-form" method="post">
        序号:<input name="id" type="text" style="width: 240px"><br>
        食品名称:<input name="name" type="text" style="width: 240px"><br>
        食品描述:<input name="desc" type="text" style="width: 240px"><br>
        食品图片:<br>
        <input type="file" id="file-upload2" style="display: none;">
        <input id="fimg2" value="" name="img" class="table-input"  style="width: 240px" type="hidden">
        <img id="img2" class="img2" width="100" height="100" src="" >
        <br>
        食品类型:<input name="type" type="text" style="width: 240px"><br>
        发售日期:
        <input name="date" type="month" style="width: 240px">
        <hr>
        <input style="float: right" type="submit" value="取消" onclick="function x() {
          $('#add-dialog').dialog('close');
        }">
        <input style="float: right; margin-right: 25px" type="submit" value="确定"
               onclick="this.form.action='../add_food'">
    </form>
</div>

<style>
    .ui-dialog-titlebar-close {
        display: none
    }
    .img {
        object-fit: cover;
        cursor: pointer;
    }
    .img2 {
        object-fit: cover;
        cursor: pointer;
    }
</style>

<script>
    var curImg = null;
    $('.img').click(function (e) {
        curImg = e.target;
        curImg.previousElementSibling.previousElementSibling.click();
    })
    $('#img2').click(function (e) {
        curImg = e.target;
        $('#file-upload2').click();
    })
    $('.file-upload').change(function (event) {
        console.log(event)
        var files = event.target.files; // 获取选中的文件列表
        var output = []; // 存储转换后的base64数据

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();
            console.log(file)
            reader.readAsDataURL(file); // 读取文件并转换为base64
            reader.onload = function(e) {
                var base64 = e.target.result;
                // $("#fimg").val(base64);
                curImg.previousElementSibling.value = base64;
                curImg.src = base64;
                // $("#img").attr("src",base64);
            };
            // 转换失败
            reader.onerror = function () {
                console.log('转换失败')
            };
        }
    });
    $('#file-upload2').change(function (event) {
        console.log(event)
        var files = event.target.files; // 获取选中的文件列表
        var output = []; // 存储转换后的base64数据

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();
            console.log(file)
            reader.readAsDataURL(file); // 读取文件并转换为base64
            reader.onload = function(e) {
                var base64 = e.target.result;
                $("#fimg2").val(base64);
                // curImg.previousElementSibling.value = base64;
                // curImg.src = base64;
                $("#img2").attr("src",base64);
            };
            // 转换失败
            reader.onerror = function () {
                console.log('转换失败')
            };
        }
    });
    $('#add-dialog').dialog({
        width: 310,
        autoOpen: false,
        draggable: false,
        modal: true,
        resizable: false
    });
    $('.btn-add').click(function () {
        $('#add-dialog').dialog('open');
    });
</script>
</body>
</html>

